<template>
	<div class="myPage" style="position: relative;">
		<div class="container"
			style="flex: 1;z-index: 2;background: #f3f3f3;flex-direction: column;height: 100%;display: flex;justify-content: start;">
			<fui-nav-bar fontWeight="bold" style="" background="white" color="#000" title="学生信息"
				@rightClick="rightClick">
				<div
					style="border: 1px solid #eeeeee;background: white;border-radius: 32rpx;padding: 6rpx;display: flex;flex-direction: row;width: 200rpx;justify-content: space-around;">
					<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="leftClick" color="black"
						name="arrowleft"></fui-icon>
					<div class="link-column" style=""></div>
					<fui-icon style="margin: 0rpx 8rpx;" size="43" @click="gotoHome" color="black"
						name="home"></fui-icon>
				</div>
				<template v-slot:right>

				</template>
			</fui-nav-bar>
			<div>
				<fui-tabs :current="current" :tabs="tabs" @change="change"></fui-tabs>
			</div>

			

			<div v-if="current==0">
				<div style="background: white;padding: 32rpx 0rpx;padding-top: 16rpx;">
					<div
						style="margin: 16rpx;background: #f1f4ff;border-radius: 16rpx;display: flex;background-image: linear-gradient();flex-direction: row;padding:32rpx 16rpx;height: 120rpx;">
						<div style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;flex: 2;">
							<image style="width: 80rpx;height: 80rpx;margin-right: 8rpx;"
								:src="stuInfo.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'"></image>
							<div style="margin-left: 16rpx;">
								<div style="font-weight: 600;font-size: 40rpx;margin-bottom: 8rpx;">姓名：{{stuInfo.name}}
								</div>
								<div style="color: #5b5b5b;">学号：{{stuInfo.stuNo}}</div>
							</div>
						</div>
						<div style="width: 1rpx;background: #e1e1e1;min-height: 80%;"></div>
						<div style="flex: 1;align-items: center;flex-direction: column;display: flex;color: #176ef0;justify-content: center;">
							<span style="font-size: 40rpx;font-weight: 600;line-height: 80rpx">正常</span>
						</div>
					</div>
				</div>
				<div style="margin: 24rpx 16rpx;padding: 16rpx;background: white;border-radius: 12rpx;">
					<div style="border-bottom: 1px #eaeaea solid;">
						<fui-form-item label="姓名">
							<fui-input v-model="stuInfo.name" :borderBottom="true" :padding="[0]"
								placeholder="请输入姓名"></fui-input>
						</fui-form-item>
					</div>

					<div style="border-bottom: 1px #eaeaea solid;">
						<fui-form-item label="学号">
							<input v-model="stuInfo.stuNo" class="fui-page__input" placeholder="请输入学号"
								placeholder-style="color:#ccc;" />
						</fui-form-item>
					</div>
				</div>
			</div>

			<div v-else>
				<div style="background: white;padding: 32rpx 0rpx;padding-top: 16rpx;">
					<div
						style="margin: 16rpx;background: #f1f4ff;border-radius: 16rpx;display: flex;background-image: linear-gradient();flex-direction: row;padding:32rpx 16rpx;height: 120rpx;">
						<div style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;flex: 2;">
							<image style="width: 80rpx;height: 80rpx;margin-right: 8rpx;"
								:src="stuInfo.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'"></image>
							<div style="margin-left: 16rpx;">
								<div style="font-weight: 600;font-size: 40rpx;margin-bottom: 8rpx;">姓名：{{stuInfo.name}}
								</div>
								<div style="color: #5b5b5b;">学号：{{stuInfo.stuNo}}</div>
							</div>
						</div>
						<div style="width: 1rpx;background: #e1e1e1;min-height: 80%;"></div>
						<div style="flex: 1;align-items: center;flex-direction: column;display: flex;color: #176ef0;">
							<span style="font-size: 80rpx;font-weight: 600;line-height: 80rpx">92</span>
							<span style="font-size: 24rpx;">分数</span>
						</div>
					</div>
				</div>
				<div style="margin: 24rpx 16rpx;padding: 16rpx;background: white;border-radius: 12rpx;">
					<div>
						<view class="fui-list__cell fui-flex__center">
							<text style="font-weight: bolder;">考试学期：</text>
							<fui-dropdown-menu :isCheckbox="false" selectedColor="#176ef0" splitLine :options="options"
								ref="ddmTag" direction="down" @click="tagItemClick" @close="tagClose">
								<view class="fui-select fui-flex__between" @tap="tagTap">
									<text>{{tag}}</text>
									<view class="fui-filter__icon" :class="{'fui-icon__ani':tagShow}">
										<fui-icon name="turningdown" :size="32"></fui-icon>
									</view>
								</view>
							</fui-dropdown-menu>
						</view>
					</div>


					<div style="padding:8rpx 16rpx;">
						<div v-for="(item,index) in stuExamInfo.electiveSubList" style="">
							<div style="height: 82rpx;" v-if="item.subItemList==null || item.subItemList.length==0">
								<fui-list-cell @click="onItemClick(item,item.topSubItemRes.itemNo,item.topSubItemRes)" :highlight="true">
									<view
										style="height: 80rpx;display: flex;align-items: center;padding: 0rpx 16rpx;flex-direction: row;width: 100%;">
										<div style="flex: 3;">{{item.subId==-1?'未选科':item.subName}}</div>

										<div v-if="item.subId!=-1"
											style="display: flex;align-items: center;width: 248rpx;">
											<div style="flex: 1;text-align: right;">
												{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.rawScore:'--'}}
											</div>
											<div
												style="width: 2rpx;background: #333333;height:20rpx;margin: 0rpx 16rpx;">
											</div>

											<div style="flex: 1;display: flex;align-items: center;">
												<div style="flex: 1;display: flex;justify-content: start;">
													<div
														style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
														{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.conversionScore:'--'}}
													</div>
												</div>

											</div>
										</div>

										<fui-icon style="color: #333333;" size="42" @click="leftClick" color="black"
											name="arrowright"></fui-icon>

										<div v-if="item.subId==-1" style="flex: 2;display: flex;">

											<div style="flex: 1;text-align: center;display: flex;align-items: center;">
												<div style="flex: 1;display: flex;justify-content: flex-end;">
													<div>选科</div>
												</div>
												<fui-icon style="color: #333333;" size="42" color="black"
													name="arrowright"></fui-icon>
											</div>
										</div>
									</view>
								</fui-list-cell>
							</div>

							<fui-collapse-item v-else
								style="background: white;margin: 0rpx;border-radius: 0rpx;;border-bottom: #eeeeee solid 1rpx;">
								<div
									style="display: flex;flex-direction: row;align-items: center;background-color: white;padding: 0rpx;height: 82rpx">
									<view
										style="height: 88rpx;display: flex;align-items: center;padding: 0rpx 16rpx;flex-direction: row;width: 100%;">
										<div style="flex: 3;">{{item.subId==-1?'未选科':item.subName }}</div>
										<div v-if="true">
											<div v-if="item.subId!=-1"
												style="width: 220rpx;display: flex;align-items: center;">
												<div style="flex: 1;text-align: right;">
													{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.rawScore:'--'}}
												</div>
												<div
													style="width: 2rpx;background: #333333;height:20rpx;margin: 0rpx 16rpx;">
												</div>
												<div
													style="flex: 1;text-align: center;display: flex;align-items: center;">
													<div style="flex: 1;display: flex;justify-content: start;">
														<div
															style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
															{{item.topSubItemRes.finalScore!=null?item.topSubItemRes.finalScore.conversionScore:'--'}}
														</div>
													</div>

												</div>
											</div>

											<div v-if="item.subId==-1" style="flex: 2;display: flex;">
												<div
													style="flex: 1;text-align: center;display: flex;align-items: center;">
													<div style="flex: 1;display: flex;justify-content: flex-end;">
														<div>选科</div>
													</div>
													<fui-icon style="color: #333333;" size="42" color="black"
														name="arrowright"></fui-icon>
												</div>
											</div>

										</div>
									</view>
								</div>

								<template v-slot:content>
									<div
										style="border-radius: 16rpx;display: flex;flex-direction: row;padding: 8rpx 32rpx;align-items: center;background-color: #f3f3f3;margin: 0rpx 16rpx;">
										<sapn style="flex: 3;">子项名</sapn>
										<sapn style="flex: 1;">操作</sapn>
									</div>
									<div @click.stop="onItemClick(item,item2.itemNo,item2)"
										v-for="(item2,index2) in item.subItemList"
										style="display: flex;flex-direction: row;align-items: center;background-color: white;padding: 0rpx;height: 72rpx;padding: 4rpx 32rpx;">
										<view
											style="height: 80rpx;display: flex;align-items: center;padding: 0rpx 16rpx;flex-direction: row;width: 100%;">
											<div style="flex: 3;">{{item2.name}}</div>

											<div style="width: 220rpx;;display: flex;align-items: center;">
												<div style="flex: 1;text-align: right;">
													{{item2.finalScore!=null?item2.finalScore.rawScore:'--'}}
												</div>
												<div
													style="width: 2rpx;background: #333333;height: 20rpx;margin: 0rpx 16rpx;">
												</div>
												<div
													style="flex: 1;text-align: center;display: flex;align-items: center;">
													<div
														style="flex: 1;display: flex;justify-content: start;align-items: center;">
														<div
															style="background: limegreen;color: white;border-radius: 8rpx;width: max-content;padding: 0rpx 8rpx;">
															{{item2.finalScore!=null?item2.finalScore.conversionScore:'--'}}
														</div>
													</div>

												</div>

											</div>
											<fui-icon style="color: #333333;" size="42" color="black"
												name="arrowright"></fui-icon>
										</view>
									</div>
								</template>
							</fui-collapse-item>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<U-MyKeyboard @confirm="onKeyConfirm" @close="closeKeyBoard" :subItem="selectSubItem"
		:show="showKey"></U-MyKeyboard>

	<fui-picker linkage title="请选择科目" :layer="1" :options="couldOptionList" :show="selectSubShow"
		@change="selectSubChange" @cancel="onShowSelectSubCancel"></fui-picker>

	<fui-modal :show="showScanNext" title="提示" descr="扫码另一位考生吗？" @click="onScanNextClick"></fui-modal>

</template>

<script>
	import request from "/request/request.js"
	export default {
		data() {
			return {
				showScanNext: false,
				stuExamInfo: {},
				examItem: {},
				showKey: false,
				current: 1,
				stuInfo: {},
				stuId: null,
				//数据格式一
				tabs: ['基本信息', '考试信息'],
				options: [{
					text: '当前学期',
					value: null,

				}, {
					text: '七年级上学期（第一学期）',
					value: 1
				}, {
					text: '七年级下学期（第二学期）',
					value: 2
				}, {
					text: '八年级上学期（第三学期）',
					value: 3
				}, {
					text: '八年级下学期（第四学期）',
					value: 4
				}, {
					text: '九年级上学期（第五学期）',
					value: 5
				}, {
					text: '九年级下学期（第六学期）',
					value: 6
				}],
				tag: '当前学期',
				tagShow: false,
				semester: null,
				electiveSub: {},
				selectSubItem: {},
				couldOptionList: [],
				selectSubShow: false,
				selectSubId: null,
				isScan: false,
			}
		},
		onLoad(option) {
			console.log(option.semester);
			this.stuId = option.stuId;

			this.getStudentsInfo();

			if (option.semester) {
				// this.tag = e.text;
				this.semester = option.semester;
				for (var i = 0; i < this.options.length; i++) {
					if (this.options[i].value == this.semester) {
						this.options[i].checked = true;
						this.tag = this.options[i].text;
					} else {
						this.options[i].checked = false;
					}
				}
			}

			if (option.subId) {
				// this.tag = e.text;
				this.selectSubId = option.subId;
			}
			if (option.isScan) {
				this.isScan = option.isScan;
			}


			// this.tagClose();
			// this.getStuExamInfoById();
		},
		methods: {
			onItemClick(electiveSub, itemNo, subItem) {
				this.selectSubItem = subItem;
				this.electiveSub = electiveSub;
				this.electiveSub.itemNo = itemNo;
				console.log(JSON.stringify(electiveSub));
				if (electiveSub.subId == -1) {
					this.showSelectSub(electiveSub.type);
				} else {

					this.showKey = true;
				}

			},
			showSelectSub(type) {
				let that = this;
				request({
					url: `/option/getCouldOptionList`,
					method: 'POST',
					data: {
						semester: that.semester,
						type: type
					}
				}).then((res) => {
					console.log(res);
					that.couldOptionList = [];
					if (res.data.length == 0) {
						that.couldOptionList = [{
							text: ""
						}, ];
						return;
					}
					for (var i = 0; i < res.data.length; i++) {
						let obj = {
							text: res.data[i].name,
							value: res.data[i].id,
						}
						that.couldOptionList.push(obj);
					}
					console.log(res);
					that.selectSubShow = true;
				}, (err) => {
					console.log('fail' + err);
				});
			},
			closeKeyBoard() {
				this.showKey = false;
			},
			leftClick() {
				uni.navigateBack();
			},
			gotoHome() {
				getApp().gotoHome();
			},
			getStudentsInfo() {
				let that = this;
				request({
					url: `/student/getStudentsExamInfo`,
					method: 'POST',
					data: {
						id: that.stuId
					}
				}).then((res) => {
					console.log(res);
					that.stuInfo = res.data.records[0];
				}, (err) => {
					console.log('fail' + err);
				});
			},
			change(e) {
				console.log(e);
				this.current = e.index;
				if (e.index == 1) {
					console.log("this.getStuExamInfoById");
					this.getStuExamInfoById();
				}
			},
			tagTap() {
				this.$refs.ddmTag.show()
				this.tagShow = true;
			},
			tagItemClick(e) {
				console.log("tagItemClick")
				console.log(e)
				this.tag = e.text;
				this.semester = e.value;
				this.tagClose();
				this.getStuExamInfoById();
			},
			tagClose() {
				this.tagShow = false;
			},
			getStuExamInfoById() {
				let that = this;
				request({
					url: `/student/getStudentExamInfoById`,
					method: 'POST',
					data: {
						id: that.stuId,
						semester: that.semester
					}
				}).then((res) => {
					console.log(res);
					that.stuExamInfo = res.data;
					if (that.selectSubId) {
						for (var i = 0; i < that.stuExamInfo.electiveSubList.length; i++) {

							if (that.stuExamInfo.electiveSubList[i].subId == that.selectSubId) {
								if (that.stuExamInfo.electiveSubList[i].subItemList == null || that.stuExamInfo
									.electiveSubList[i].subItemList.length == 0) {
									console.log(that.stuExamInfo.electiveSubList[i]);
									that.onItemClick(that.stuExamInfo.electiveSubList[i], 0, that.stuExamInfo
										.electiveSubList[i].topSubItemRes);
								}
							}
						}
						that.selectSubId = null;
					}

				}, (err) => {
					console.log('fail' + err);
				});
			},
			onKeyConfirm(e) {
				let that = this;
				this.showKey = false;
				console.log("onKeyConfirm");
				console.log(e);
				request({
					url: `/score/updateScore`,
					method: 'POST',
					data: {
						count: e.count,
						score: e.value,
						itemNo: that.electiveSub.itemNo,
						stuId: that.stuId,
						electiveId: that.electiveSub.id
					}
				}).then((res) => {
					console.log(that.isScan);
					that.getStuExamInfoById();
					if (that.isScan) {
						setTimeout(() => {
							console.log("scanNext");
							that.showScanNext = true;
						}, 1000)
					}
				}, (err) => {
					console.log('fail' + err);
				});
			},
			onShowSelectSubCancel(e) {
				this.selectSubShow = false;
			},
			selectSubChange(e) {
				let that = this;
				console.log(e);
				request({
					url: `/option/selectSub`,
					method: 'POST',
					data: {
						electiveSubId: that.electiveSub.id,
						subId: e.value,
						stuId: that.stuId,
					}
				}).then((res) => {
					console.log(res);
					that.selectSubShow = false;
					that.getStuExamInfoById();
				}, (err) => {
					console.log('fail' + err);
				});
			},
			onScanNextClick(e) {
				if (e.index == 0) {

				}
				if (e.index == 1) {
					uni.$emit("scanLister", {
						isScan: true
					})
					uni.navigateBack();
				}
			}

		}
	}
</script>

<style>
	.fui-filter__icon {
		transition: all .15s linear;
	}

	.fui-icon__ani {
		transform: rotate(180deg);
	}

	.fui-list__cell {
		width: 100%;
	}

	.fui-select {
		flex: 1;
		height: 80rpx;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.fui-select::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		height: 200%;
		border: 1px solid #eee;
		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none;
	}

	.fui-flex__center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fui-flex__between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>